<template>
  <el-container class="main_con" >
    <div class="header">
      <div class="icon">
        <i class="el-sc-shezhi1"></i>
      </div>
      <div class="txt">微信小程序Key设置</div>
    </div>
    <div class="notice">

      <div class="panelCon">
        <div class="tips">
          微信小程序AppId与AppSecret必须先设置,否则无法上传小程序代码
        </div>
        <div class="edit_con">
          <div class="edit_content">
            <el-form size="medium" label-width="100px" class="edit_form" ref="wxaForm" :model="wxa_obj.configuration" :rules="wxaRules">

              <el-form-item label="AppId" style="color:#606266;" prop="appid">
                <el-input placeholder="请输入微信小程序AppId" v-model.trim="wxa_obj.configuration.appid" style="width:360px;"></el-input>
              </el-form-item>

              <el-form-item label="AppSecret" style="color:#606266;" prop="appsecret">
                <el-input placeholder="请输入微信小程序AppSecret" v-model.trim="wxa_obj.configuration.appsecret" style="width:360px;"></el-input>
              </el-form-item>
              <el-form-item label="域名授权文件" >
                <el-upload
                  class="upload-demo"
                  drag
                  accept=".txt"
                  :action="url + geturl + '/upload/license'"
                  :headers="headers"
                  :on-change="handleChange"
                  :on-success="handleSuccess"
                  ref="uploadMutiple"
                  name="license"
                  :file-list="fileList"
                  :on-remove="handleRemove"

                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                  </div>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>

          <div class="edit_footer">
            <el-button size="medium" type="primary" @click="saveConfig">保存数据</el-button>
          </div>
        </div>
      </div>

    </div>
  </el-container>
</template>

<script>
import {
  addSiteConfig,
  editSiteConfig,
  getSiteConfig
} from '@/api/mall/setting';
import {getToken} from '@/utils/auth';
import {geturl} from '@/api/common'
export default {
  data(){
    return {
      isLoading:false,
      url: process.env.VUE_APP_BASE_API,
      fileList:[],
    headers: {
      PageAction: '28,update'
    },
      geturl:"madmin",
      wxa_obj:{
        type:'wxa',
        configuration:{
          appid:'',
          appsecret:'',
          licenseFile:''
        }
      },
      wxaRules: {
        appid: [{
          required: true,
          message: 'AppId必须填写',
        }, ],
        appsecret: [{
          required: true,
          message: 'AppSecret必须填写',
        }],
        licenseFile: [{
          required: true,
          message: '请上传域名授权文件',
          trigger: 'change'
        }],
      }
    }
  },
  components: {},
  created(){},
  mounted(){
    this.headers['Authorization'] = getToken();
    this.getSiteConfig('wxa')
  },
  methods: {
    handleRemove(){
      this.wxa_obj.configuration.licenseFile='';
    },
    handleChange(e){
    },
    handleSuccess(e){
      this.fileList=[{name:e.msg}]
      this.wxa_obj.configuration.licenseFile=e.msg
    },
    //获取站点配置信息
    getSiteConfig(tp){
      this.isLoading = true;
      getSiteConfig(tp).then(res => {
        this.isLoading = false;
        //微信小程序配置
        if(res.msg){
          if(!res.msg.configuration.licenseFile){
            res.msg.configuration.licenseFile=''
          }
          this.wxa_obj = {...res.msg};
          let licenseFile=this.wxa_obj.configuration.licenseFile
          if(licenseFile){
            this.fileList=[{name:licenseFile}]
          }
        };

      }).catch(e => {
        this.isLoading = false;
      });
    },
    //保存小程序appid及密钥设置
    saveConfig(){
      this.$refs.wxaForm.validate(valid => {
        if (valid) {
          this.isLoading = true;
          //微信小程序配置
          if(this.wxa_obj.update_time){
            //修改
            editSiteConfig(this.wxa_obj).then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getSiteConfig('wxa');
              if(this.$route.query.isR){
                this.$router.push('/multiple/mp');
              };
            }).catch(e => {
              this.isLoading = false;
            });
          }else{
            //新增
            addSiteConfig(this.wxa_obj).then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getSiteConfig('wxa');
              if(this.$route.query.isR){
                this.$router.push('/multiple/mp');
              };
            }).catch(e => {
              this.isLoading = false;
            });
          };
        } else {
          //console.log('error')
          return false
        }
      });

    }
  }
}
</script>

<style lang="scss" scoped>
//覆盖样式
::v-deep .el-step__title{
  font-size: 14px;
}

.header{
  background:#DCDFE6;
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
  display: flex;

  .icon{
    color: #2d8cf0;

    i{
      vertical-align: middle;
      font-size: 24px;
    }
  }

  .txt{
    margin-left: 10px;
    font-weight: bold;
    font-size: 24px;
    color: #2d8cf0;
  }
}

.notice{
  margin-top: 20px;
  padding-top: 10px;
  background: #fff;
}

.panelCon{
  width: 100%;
  padding:5px 20px 20px;

  .tips{
    padding: 15px;
    color:#606266;
    font-size: 14px;
    line-height: 28px;
    border: 1px solid #abdcff;
    background-color: #f0faff;
  }

  > .title{
    background:#e0e3e8;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 20px;
  }

  .edit_con{
    .edit_content{
      .edit_form{
        width: 100%;

        .templateDemo{
          width: 100%;
          padding: 20px;
          background: #F4F6F8;

          .pic_area{
            width: 250px;
            min-height: 410px;
            background-size: 250px 410px;
            background-position: top left;
            position: relative;
            padding: 70px 10px 0;

            .wxd{
              position: absolute;
              left: -30px;
              top: 50px;
              // position: relative;
              width: 310px;
              padding: 18px 16px;
              background-color: #fff;
              font-size: 15px;
              color: #212121;
              border: 1px solid #E5E5E5;
              border-radius: 5px;
              -webkit-transform: scale(0.7);
              transform: scale(0.7);

              .template-title{
                margin-bottom: 20px;
                line-height: 20px;
                font-size: 14px;
                color: #969696;
              }

              .template-html{
                line-height: 20px;
                font-size: 14px;
                width: 100%;
                word-break: break-all;

                .flex{
                  width: 100%;
                  display: flex;
                  height: 20px;
                  margin-bottom: 10px;

                  .label{
                    flex-shrink: 0;
                    width: 80px;
                    color: #969696;
                  }

                  .txt{
                    height: 20px;
                    flex-grow: 1;
                    line-height: 20px;
                    margin-bottom: 27px;
                  }
                }
              }
            }

            .mpd{
              position: absolute;
              left: -51px;
              top: 14px;
              padding-right: 6px;
              width: 351px;
              background-color: #fff;
              border: 1px solid #E5E5E5;
              border-radius: 5px;
              overflow: hidden;
              -webkit-transform: scale(0.66);
              transform: scale(0.66);

              .title.flex{
                display: flex;
                padding: 0 20px 0 18px;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                height: 54px;
                background-color: #fff;
                border-bottom: 1px solid #E5E5E5;

                .logo{
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  font-weight: 700;
                  font-size: 13px;
                  line-height: 18px;
                  color: #1a1a1a;

                  .logo-icon{
                    margin-right: 4px;
                    width: 27px;
                    height: 27px;
                    line-height: 25px;
                    border: 1px solid #E7E7E7;
                    font-size: 9px;
                    color: #367BF5;
                    text-align: center;
                    border-radius: 50%;
                    font-weight: 500;
                    -webkit-transform: scale(0.8);
                    transform: scale(0.8);
                  }
                }

                .dot{
                  height: 27px;
                  line-height: 27px;

                  span{
                    display: inline-block;
                    margin-left: 3px;
                    width: 5px;
                    height: 5px;
                    background-color: #c7c7cb;
                    border-radius: 50%;
                  }
                }
              }

              .content{
                padding-left: 18px;

                .template-title{
                  margin: 16px 0 34px;
                  line-height: 24px;
                  font-size: 17px;
                }

                .template-html{
                  line-height: 20px;
                  font-size: 14px;
                  word-break: break-all;

                  .flex{
                    display: flex;
                    height: 20px;
                    margin-bottom: 10px;
                  }

                  .label{
                    width: 83px;
                    color: #969696;
                  }

                  div:last-child{
                    margin-bottom: 27px;
                  }
                }
              }

              .template-link{
                padding-left: 18px;
                height: 44px;
                line-height: 44px;
                font-size: 16px;
                cursor: default;
                border-top: 1px solid #e5e5e5;
              }
            }

            .smsd{
              min-height: 300px;
              background: #fff;

              .sms-notice{
                position: absolute;
                left: -22px;
                top: 86px;
                padding: 5px 12px;
                width: 274px;
                font-size: 15px;
                background-color: #E9E9EB;
                border-radius: 16px;
                -webkit-transform: scale(0.66);
                transform: scale(0.66);

                .sms-icon-img{
                  position: absolute;
                  left: -15px;
                  bottom: 2px;
                  width: 34px;
                  height: 41px;
                }

                .message-content{
                  position: relative;
                  line-height: 22px;
                }
              }

            }
          }
        }
      }
    }
  }

  //上传代码操作步骤
  .steps{
    height: 100px;
    padding:20px 100px 10px;
    font-size: 14px;
  }

  .access{
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 364px);

    .abk{
      //width: 260px;
      font-size: 14px;

      .title{
        font-size: 18px;
        text-align: center;
        font-weight: 700;
      }

      .desc{
        text-align: center;
        margin: 10px 0;
      }

      .c0{
        margin-top: 20px;
        width: 260px;
        height: 260px;
        position: relative;

        .icon{
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%, -50%);


          img{
            width: 100px;
            height: 100px;
          }
        }
      }

      .c1{
        .qrcode{
          img{
            width: 260px;
            height: 260px;
          }
        }

        .txt{
          text-align: center;
        }
      }

      .c2{
        margin-top: 20px;
      }

      .c3{
        width: 360px;
        margin-top: 20px;
        text-align: center;

        .txt{
          margin-top: 30px;
          font-size: 16px;
        }
      }

      .btn{
        text-align: center;
        margin-top: 20px;
      }
    }
  }
}
</style>
